<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
          @search="$refs.table.refresh(true)"
          @reset="
            () => {
            (this.queryParam = {}), $refs.table.refresh(true);
            }
            "
      >

        <!--toolBar-->
        <template slot="toolBtn" slot-scope="scope">
          <a-button
						class="cu-btn-primary" icon="plus"
						@click="handleAdd()"
						v-action:sysDatabaseConnectionAddDialog
          >
						{{$ct("add","新增")}}
          </a-button>
        </template>

        <!--search -->
        <template slot="toolForm">
          <a-form-item label="名称">
            <a-input v-model="queryParam.name" placeholder="名称"/>
          </a-form-item>
          <a-form-item :label="$ct('driverClass','驱动类')">
            <a-select v-model="queryParam.driverClass"
                      :placeholder="$ct('driverClass','驱动类')"
                      allowClear
                      style="width:200px"
            >
              <a-select-option value="com.mysql.cj.jdbc.Driver">
                MySQL
              </a-select-option>
              <a-select-option value="oracle.jdbc.OracleDriver">
                Oracle
              </a-select-option>
              <a-select-option value="com.microsoft.sqlserver.jdbc.SQLServerDriver">
                SqlServer
              </a-select-option>
              <a-select-option value="org.postgresql.Driver">
                PostgreSQL
              </a-select-option>
              <a-select-option value="dm.jdbc.driver.DmDriver">
                达梦数据库
              </a-select-option>
              <a-select-option value="com.kingbase8.Driver">
                人大金仓数据库
              </a-select-option>
            </a-select>
          </a-form-item>
        </template>
      </tool-bar>

      <!--	table	 -->
      <DataGrid
          ref="table"
          :columns="columns"
          :url="url"
          :queryParam="queryParam"
          rowKey="uuid"
          :format-conditions="true"
          :showRowSelect="false"
      >
        <template slot="renderDriverClass" slot-scope="{ text }">
          {{ text | sexStr }}
        </template>

        <template slot="renderAction" slot-scope="{ text, record }">
          <a style="margin-right: 5px" @click="() => handleEdit(record)">{{$ct("edit","编辑")}}</a>
          <a style="margin-right: 5px" @click="() => handleSub(record)"
              :class="record.uuid == '0DD9F4D5DFB546EEBE12E027DC43EB9B' ? '' : 'action-delete'"
              :disabled="record.uuid == '0DD9F4D5DFB546EEBE12E027DC43EB9B' ? true : false">{{ $ct("delete", "删除")
              }}</a>
        </template>
      </DataGrid>

      <!-- dialog	 -->
      <edit-form
          ref="createModal"
          :visible="visible"
          :loading="confirmLoading"
          :model="mdl"
          @cancel="handleCancel()"
          @ok="handleOk()"
          @dbtest="dbtest()"
      />
    </div>
  </div>
</template>


<!--script-->
<script>
  //数据表格组件
  import {DataGrid} from "@/components";
  //方法封装
  import {dataGridMixin} from "@/mixins/dataGridMixin";
  //新增编辑界面
  import editForm from './edit.vue'
  //字典
  import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag'
  import TMultiSelectTag from '@/components/TopVUI/dict/TMultiSelectTag'

  export default {
    name: "Table",
    components: {DataGrid, editForm, TDictSelectTag, TMultiSelectTag},
    mixins: [dataGridMixin],
    data() {
      return {
        columns: [
          {
            title: '名称',
            width: 100,
            dataIndex: 'name'
          },
          {
            title: '驱动类',
            width: 100,
            dataIndex: 'driverClass',
            scopedSlots: {
              customRender: "renderDriverClass"
            },
          },
          {
            title: '用户名',
            width: 150,
            dataIndex: 'username',
						langCode: "sysDatabaseUserName"
          },
          {
            title: '备注',
            width: 100,
            dataIndex: 'remark',
						langCode: "remarks"
          },
					{
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: 200,
            scopedSlots: {
              customRender: 'renderAction'
            }
          }
        ],
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 查询参数
        queryParam: {},
        url: {
          getPageSet: '/system/sysDatabaseConnection/getPageSet',
          save: '/system/sysDatabaseConnection/save',
          update: '/system/sysDatabaseConnection/update',
          deleteBatch: '/system/sysDatabaseConnection/deleteBatch'
        },
      };
    },
    methods: {
      dbtest() {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          let fromValue = {
            ...values
          }
          if (!errors) {
            this.$post('/system/sysDatabaseConnection/dbTest', fromValue).then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success(res.message || '操作成功', 1.5)
              } else {
                this.$message.error(res.message || '操作失败', 1.5)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      }


    },
    filters: {
      sexStr(val) {
        switch (val) {
          case "com.mysql.cj.jdbc.Driver":
            return "MySQL";
          case "oracle.jdbc.OracleDriver":
            return "Oracle";
          case "com.microsoft.sqlserver.jdbc.SQLServerDriver":
            return "SqlServer";
          case "org.postgresql.Driver":
            return "PostgreSQL";
          case "dm.jdbc.driver.DmDriver":
            return "达梦数据库";
          case "com.kingbase8.Driver":
            return "人大金仓数据库";
        }
      },
    },

  };
</script>

<!--style-->
<style scoped lang="less">
  .table {
    background-color: @base-bg-color;
    padding: 24px;
  }
</style>

